<script setup lang='ts'>
//引入ref
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores/users';
//使用仓库
const userStore = useUserStore();
//使用路由
const router = useRouter()
//编写正则
const pattern = /^\w{6,16}$/
//是否禁用的按钮
let disab = ref(false)
//输入的密码
const password = ref('');

const onSubmit = async (values:{password:string}) => {
    //手机号码和密码
    let tel = userStore.loginname
    let password = values.password
    let obj = {tel,password}
    //调用store action 里面的请求
    try{
        await userStore.doRegisterHandler(obj)
        router.push('/home')
    }catch{
        router.push('/register')
    }
};

</script>
<template>
    <van-form @submit="onSubmit" validate-trigger="onChange">
        <van-cell-group inset>
            <van-field v-model="password" name="password" label="请输入密码" placeholder="请输入密码" :rules="[{ required: true, message: '请填写密码' },{pattern,message:'密码的长度是6~16位之间'}]">
            </van-field>
        </van-cell-group>
        <div style="margin: 16px;">
            <van-button round block type="danger" native-type="submit">
                注册
            </van-button>
        </div>
    </van-form>
</template>
<style scoped lang='scss'>
.van-form {
    margin-top: 60px;
}
</style>